<template>
  <div class="bottom">
    <div class="footer"></div>
    <div
      class="item"
      v-for="(item, index) of list"
      :key="index"
      :class="{ active: index == num }"
      @click="addClassName(index)"
    >
      <router-link :to="item.path">
        <!-- 图片也是一样的道理，把span标签换成img即可。 -->
 <div class="image">
        <img :src="item.icon" alt="" v-show="num != index" :class="item.icon" />
        <img
          :src="item.active"
          alt=""
          v-show="num == index"
          :class="item.active"
        />
        
</div>
        <a>{{item.name}}</a>
      </router-link>
    </div>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      list: [
        {
          icon: require("../assets/icon/204首页-线性.png"), //原始显示的图标
          active: require("../assets/icon/204首页.png"), //点击之后要显示的图标
          name: "首页",
          path: "/",
        },
        {
          icon:require( "../assets/icon/06商品-线性.png"),
          active: require( "../assets/icon/06商品.png"),
          name: "商品",
          path: "/brand",
        },
        {
          icon: require("../assets/icon/05采购-线性.png"),
          active: require("../assets/icon/05采购.png"),
          name: "购物车",
          path: "/cart",
        },
        {
          icon: require("../assets/icon/208聊天、对话-线性.png"),
          active:require("../assets/icon/208聊天、对话.png"),
          name: "客服",
          path: "/member",
        },
      ],
      num: 0,
      tabName: "",
    };
  },
  mounted() {},
  methods: {
    addClassName: function (index) {
      console.log(index);
      this.num = index;
    },
  },
};
</script>
<style lang="less" scoped>
.bottom {
  z-index: 1;
  position: fixed;
   margin: 0;
  padding: 0;
  display: flex;
  bottom: 0px;
  left: 0;
  bottom: 0;
  border-top: 1px solid black;
  width: 100%;
  background-size: border-box;
  background-color: WhiteSmoke;
}
.box{
  display: flex;
  flex: 1;
}
.item {
   width: 100%;
  height: 60px;
  display: block;
flex: 1;
padding: 5px;
margin-left: 6%;
}
.item a{
  font-weight: 800;
  color: gray;
  width: 100%;
  text-decoration: none;
}
.image img{
  width: 30px;
  height: 30px;
}

.active {
  color: #108b70;
}
</style>